﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.GoodsModifyModel
@{
    ViewData["Title"] = "商品管理";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<div id="container">
    <link rel="stylesheet" href="~/themes/css/jquery.nestable.min.css" />
    <style>
        .layui-tab-title {
            border-color: #efefef;
        }

            .layui-tab-title li {
                font-size: 12px;
                color: #76838f;
            }

        .layui-tab-item {
            overflow-y: auto;
            overflow-x: hidden;
        }

        .layui-col-md2 {
            text-align: center;
            padding-top: 50px;
            font-weight: bold;
        }

        .layui-col-md10 {
            border-left: 5px solid #ffffff;
            padding: 10px 15px;
        }

        .layui-fluid {
            background-color: #f1f4f5;
            padding: 0px;
            color: #76838f;
        }


        .layui-row.b5 {
            border-bottom: 5px solid #ffffff;
        }

        .col-span {
            display: inline-block;
            padding: 10px;
        }

        .form-cur-wall {
            margin-top: 20px;
        }

        .tip-alert {
            color: #00c1de;
            background-color: #dff6fa;
            border-color: #c1e7ee;
            border-radius: 4px;
            padding: 15px;
            margin: 20px 0;
            font-size: 12px;
        }
        .dd {
            padding:15px 0;
        }
        .dd-list .dd-item {
            margin-right:10px;
        }
        .dd-list .dd-item img{
            width:120px; 
            height:120px;
        }
        .swimg-wall {
            display: flex;
        }
        .upimg-wall {
            width: 140px;
            height: 140px;
            background-color: #ffffff;
            margin-right: 15px;
            border-radius: 5px;
            position: relative;
            top: 20px;
            cursor: pointer;
        }
        .select-swimg {
            width: 140px;
            height: 140px;
            text-align: center;
            padding-top: 35px;
        }
        .select-swimg span {
            display: block;
            font-size: 12px;
        }
        .del-swimg {
            position: absolute;
            right: 11px;
            bottom: 16px;
            background-color: #e86941;
            padding: 2px 6px;
            color: #ffffff;
            cursor: pointer;
        }
        .cur-select {
            border: 1px solid #e6e6e6;
            height:38px;
            line-height:38px;
            border-radius:3px;
            padding:0 15px;
        }
        .layui-btn-danger, .layui-btn-danger:hover, .layui-btn-danger:focus {
            background-color: #FF5722;
        }
    </style>
    <form class="layui-form form-cus" action="" id="app" style="padding:0 20px;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本</li>
                <li>库存/规格</li>
                <li>详情</li>
                <li>分销</li>
                <li>会员折扣</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-fluid">
                        <!-- 基本信息 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">基本信息</div>
                            <div class="layui-col-md10">
                                <div class="form-cur-wall">
                                    <label>所属商家：</label>
                                    <div class="layui-input-block row">
                                        <select id="store" name="store" lay-search="" lay-verify="required" lay-verType="tips">
                                            <option value="">请选择商家</option>
                                            <option v-for="it in store" :value="it.guid">{{it.storeName}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>商品分类：</label>
                                    <div class="layui-input-block row">
                                        <select id="category" name="category" lay-search="" lay-verify="required" lay-verType="tips">
                                            <option value="">请选择分类</option>
                                            <option v-for="it in category" :value="it.id">{{it.title}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>所属品牌：</label>
                                    <div class="layui-input-block row">
                                        <select id="brand" name="brand" lay-search="" lay-verify="required" lay-verType="tips">
                                            <option value="">请选择品牌</option>
                                            <option v-for="it in brand" :value="it.guid">{{it.brandName}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>商品名称：</label>
                                    <div class="layui-input-block row">
                                        <div class="layui-col-md8">
                                            <input type="text" name="goodsName" v-model="m.goodsName" value="" lay-verify="required" lay-verType="tips" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-col-md4">
                                            <div class="form-cur-wall" style="margin-top:0px;">
                                                <label>单位：</label>
                                                <div class="layui-input-block row">
                                                    <input type="text" name="unit" v-model="m.unit" value="" placeholder="单位，如：个/件/箱" maxlength="100" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>商品短标题：</label>
                                    <div class="layui-input-block row">
                                        <input type="text" name="subTitle" v-model="m.subTitle" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <div class="input-tip">商品短标题 用于商品促销活动、宣传语、打折等活动标语</div>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>关键字：</label>
                                    <div class="layui-input-block row">
                                        <input type="text" name="keyword" v-model="m.keyword" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <div class="input-tip">商品关键字,能准确搜到商品的,比如 : 手机|电脑 之类的</div>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>副标题：</label>
                                    <div class="layui-input-block row">
                                        <textarea name="description" v-model="m.description" class="layui-textarea" style="min-height: 60px;" placeholder=""></textarea>
                                        <div class="input-tip">副标题的长度请控制在100字以内</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商品信息 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">商品信息</div>
                            <div class="layui-col-md10">
                                <div class="form-cur-wall">
                                    <label>商品价格：</label>
                                    <div class="layui-input-block row">
                                        <div class="layui-col-md3">
                                            <input type="number" name="salePrice" v-model="m.salePrice" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-col-md1">
                                            <span class="col-span">元 原价</span>
                                        </div>
                                        <div class="layui-col-md3">
                                            <input type="number" name="originalPrice" v-model="m.originalPrice" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-col-md1">
                                            <span class="col-span">元 成本</span>
                                        </div>
                                        <div class="layui-col-md3">
                                            <input type="number" name="costPrice" v-model="m.costPrice" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                        <div class="layui-col-md1">
                                            <span class="col-span">元</span>
                                        </div>
                                        <div class="layui-clear"></div>
                                        <div class="input-tip">尽量填写完整，有助于于商品销售的数据分析</div>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>商品图片：</label>
                                    <div class="layui-input-block row">
                                        <div class="tip-alert" style="margin:0;">支持手动左右拖拽排序，第一张图默认为封面图</div>
                                        <div class="swimg-wall">
                                            <div class="upimg-wall fyt-cloud" data-text="ImgUrl" data-img="imgShow" data-type="many">
                                                <div class="select-swimg">
                                                    <i class="icon-addphote"></i>
                                                    <span>选择图片</span>
                                                </div>
                                            </div>
                                            <div class="dd">
                                                <ol class="dd-list" style="display: flex;">
                                                    <li class="dd-item" v-for="it in m.imageList" :data-image="it.image">
                                                        <div class="dd-handle">
                                                            <img :src="it.image" alt="" />
                                                        </div>
                                                        <div class="del-swimg" :onclick="'oc.deleteFile(\''+it.image+'\')'"><i class="layui-icon layui-icon-delete"></i></div>
                                                    </li>
                                                </ol>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label></label>
                                    <div class="layui-input-block row">
                                        <div class="input-tip">最多上传6张图片，默认第一张图片为封面图，建议图片大小为：600X600像素</div>
                                    </div>
                                </div>
                               
                                <div class="form-cur-wall">
                                    <label>包装清单：</label>
                                    <div class="layui-input-block row">
                                        <textarea name="packInfo" v-model="m.packInfo" class="layui-textarea" style="min-height: 110px;" placeholder=""></textarea>
                                        <div class="input-tip">包装清单：介绍商品包装参数，例如箱子：长宽高</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商品属性 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">商品属性</div>
                            <div class="layui-col-md10">
                                <div class="form-cur-wall">
                                    <label>商品属性：</label>
                                    <div class="layui-input-block row" style="padding-top:12px;">
                                        <input type="checkbox" id="isTop" name="isTop" lay-skin="primary" title="是否推荐">
                                        <input type="checkbox" id="isRed" name="isRed" lay-skin="primary" title="是否热销">
                                        <input type="checkbox" id="isDelivery" name="isDelivery" lay-skin="primary" title="是否包邮">
                                        <input type="checkbox" id="isCoupon" name="isCoupon" lay-skin="primary" title="是否支持使用优惠券">
                                        <input type="checkbox" id="isDel" name="isDel" lay-skin="primary" title="是否放入回收站">
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="form-cur-wall">
                                        <label>收货方式：</label>
                                        <div class="layui-input-block row">
                                            <select id="getGoodsType" name="GetGoodsType">
                                                <option value="商家自提、快递">所有</option>
                                                <option value="商家自提">商家自提</option>
                                                <option value="快递">快递</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="form-cur-wall">
                                        <label>运费：</label>
                                        <div class="layui-input-block row">
                                            <input type="number" name="freight" v-model="m.freight" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-clear"></div>
                                <div class="form-cur-wall">
                                    <label>标签：</label>
                                    <div class="layui-input-block row" style="padding-top: 12px;">
                                        <input type="checkbox" id="cbk_zpbz" name="cbk_zpbz" lay-skin="primary" title="正品保证">
                                        <input type="checkbox" id="cbk_wllth" name="cbk_wllth" lay-skin="primary" title="市区包邮">
                                        <input type="checkbox" id="cbk_bx" name="cbk_bx" lay-skin="primary" title="保修">
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>上架状态：</label>
                                    <div class="layui-input-block row">
                                        <input type="radio" name="isAudit" value="up" title="上架" checked="">
                                        <input type="radio" name="isAudit" value="down" title="下架">
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>上架时间：</label>
                                    <div class="layui-input-block row">
                                        <input type="text" name="uptime" id="uptime" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <div class="input-tip">商品在选择时间内自动上架，过期自动下架，不选择默认一直上架状态</div>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>排序：</label>
                                    <div class="layui-input-block row">
                                        <div id="sort" style="position:relative; top:20px;"></div>
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>退货换状态：</label>
                                    <div class="layui-input-block row">
                                        <input type="checkbox" id="isReturn" name="isReturn" lay-skin="switch" lay-text="支持|不支持">
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>积分兑换：</label>
                                    <div class="layui-input-block row">
                                        <input type="checkbox" id="isExchange" name="isExchange" lay-filter="exchange" lay-skin="switch" lay-text="支持|不支持">
                                    </div>
                                </div>
                                <div class="form-cur-wall" v-show="isjfdh">
                                    <label>兑换积分数：</label>
                                    <div class="layui-input-block row">
                                        <input type="number" name="exchangePoint" v-model="m.exchangePoint" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="form-cur-wall">
                                    <label>赠送积分：</label>
                                    <div class="layui-input-block row">
                                        <input type="number" name="giftPoints" v-model="m.giftPoints" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-fluid">
                        <!-- 库存 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">库存</div>
                            <div class="layui-col-md10">
                                <div class="layui-col-md6">
                                    <div class="form-cur-wall">
                                        <label>编码：</label>
                                        <div class="layui-input-block row">
                                            <input type="text" name="number" v-model="m.number" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="form-cur-wall">
                                        <label>条形码：</label>
                                        <div class="layui-input-block row">
                                            <input type="text" name="sku" v-model="m.sku" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-clear"></div>
                                <div class="form-cur-wall">
                                    <label>库存数：</label>
                                    <div class="layui-input-block row">
                                        <input type="number" name="kcSum" v-model="m.kcSum" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <div class="input-tip">库存数低于1，则自动下架</div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="form-cur-wall">
                                        <label>销售数：</label>
                                        <div class="layui-input-block row">
                                            <input type="number" name="xsSum" v-model="m.xsSum" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="form-cur-wall">
                                        <label>查看数：</label>
                                        <div class="layui-input-block row">
                                            <input type="number" name="hits" v-model="m.hits" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-clear"></div>
                            </div>
                        </div>
                        <!-- 规格 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">规格</div>
                            <div class="layui-col-md10">
                                <div class="form-cur-wall">
                                    <label>规格状态：</label>
                                    <div class="layui-input-block row">
                                        <input type="checkbox" id="isOpenSpect" name="isOpenSpect" :checked="m.isOpenSpect?true:false" lay-skin="switch" lay-filter="switchSpect" lay-text="开启|关闭">
                                        <div class="input-tip">启用商品规格后，商品的价格及库存以商品规格为准,库存设置为0则会到”已售罄“中，手机也不会显示, -1为不限制</div>
                                        <div class="tip-alert" v-show="m.isOpenSpect">
                                            每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
                                        </div>
                                    </div>
                                </div>
                                <div class="form-cur-wall" v-show="m.isOpenSpect">
                                    <label></label>
                                    <div class="layui-input-block">
                                        <input v-for="(it,index) in spect" type="checkbox" :checked="cbkIsExist(it)?true:false" name="spectSel" :data-guid="it.guid" :data-enname="it.enSpectName" lay-filter="spectCbk" lay-skin="primary" :title="it.spectName" :value="it.spectName">
                                    </div>
                                </div>
                                <div class="form-cur-wall" v-show="m.isOpenSpect">
                                    <label></label>
                                    <div class="layui-input-block">
                                        <div>
                                            <button type="button" class="layui-btn" @@click="addSpect">添加一行规格</button>
                                            <button type="button" class="layui-btn layui-btn-danger" @@click="delSpect">关闭规格</button>
                                        </div>
                                        <table class="layui-table">
                                            <thead>
                                                <tr>
                                                    <th>货号</th>
                                                    @*<th>条码</th>*@
                                                    <th v-for="it in selectCbkSpect">{{it.name}}</th>
                                                    <th>库存</th>
                                                    <th>预售价格</th>
                                                    <th>原价</th>
                                                    <th>成本</th>
                                                    <th>默认项</th>
                                                    <th style="text-align:center">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(it,index) in spectTable">
                                                    <td><input type="text" v-model="it.number" class="layui-input" style="width:80px;" /></td>
                                                    @*<td><input type="text" v-model="it.sku" class="layui-input" style="width:100px;" /></td>*@
                                                    <td v-for="(row,cindex) in selectCbkSpect">
                                                        <select :id="'day'+cindex+'_'+index" class="layui-show cur-select" lay-ignore>
                                                            <option v-for="cell in spectCode" :selected="it.spectValue.length>0 && it.spectValue[cindex].value==cell.code?true:false" v-if="cell.spectGuid==row.guid" :value="cell.code">{{cell.code}}</option>
                                                        </select>
                                                    </td>
                                                    <td><input type="number" v-model="it.kcsum" class="layui-input" style="width:80px;" /></td>
                                                    <td><input type="number" v-model="it.saleprice" class="layui-input" style="width:80px;" /></td>
                                                    <td><input type="number" v-model="it.sourceprice" class="layui-input" style="width:80px;" /></td>
                                                    <td><input type="number" v-model="it.costprice" class="layui-input" style="width:80px;" /></td>
                                                    <td style="width:60px;text-align:center;padding-left:25px;"><input class="layui-show" type="radio" name="default" v-model="it.isdefault" value="true" @@change="changeDefault(it)" lay-ignore /></td>
                                                    <td style="width:60px;text-align:center;"><i class="layui-icon layui-icon-delete" style="cursor:pointer;font-size:20px;" @@click="spectDel(index)"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-row">
                        <div class="layui-form-item layui-form-text">
                            <textarea id="Context" name="Context" placeholder="请输入内容" class="layui-textarea" v-html="m.context"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-fluid">
                        <!-- 分销 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">分销</div>
                            <div class="layui-col-md10">
                                <div class="form-cur-wall">
                                    <label>分销状态：</label>
                                    <div class="layui-input-block row">
                                        <input type="checkbox" name="isFenXiao" id="isFenXiao" lay-filter="fenxiao" lay-skin="switch" lay-text="开启|关闭">
                                        <div class="input-tip">如果不参与分销，则不产生分销佣金</div>
                                        <div class="tip-alert" v-show="m.isFenXiao">
                                            如果比例为空，则使用固定规则，如果都为空则无分销佣金
                                        </div>
                                    </div>
                                </div>
                                <div class="form-cur-wall" v-for="it in m.fenXiaoJson" v-show="m.isFenXiao">
                                    <label>{{it.name}}：</label>
                                    <div class="layui-input-block row">
                                        <input type="number" v-model="it.ratio" style="width:120px; display:inline-block;" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <span class="col-span">% 固定</span>
                                        <input type="number" v-model="it.money" style="width:120px; display:inline-block;" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <span class="col-span">元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-fluid">
                        <!-- 会员折扣 -->
                        <div class="layui-row layui-col-space5 b5">
                            <div class="layui-col-md2">会员折扣</div>
                            <div class="layui-col-md10">
                                <div class="form-cur-wall">
                                    <label>参与状态：</label>
                                    <div class="layui-input-block row">
                                        <input type="checkbox" id="isDisCount" name="isDisCount" lay-skin="switch" lay-filter="discount" lay-text="开启|关闭">
                                        <div class="tip-alert">
                                            <p>只有当折扣大于0，小于10的情况下才能生效，否则按自身会员等级折扣计算</p>
                                            <p>如果折扣为空或者0，则不设置折扣, 折扣和固定金额都有,则优先使用折扣</p>
                                            <p>如果会员价为空或者0，则不设置会员价</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-cur-wall" v-show="m.isDisCount">
                                    <label>折扣类型：</label>
                                    <div class="layui-input-block row">
                                        <input type="radio" name="disCountType" value="true" title="默认" checked="">
                                        <input type="radio" name="disCountType" value="false" title="默认|自定义">
                                        <div class="tip-alert">
                                            <p>如果默认，则读取会员组管理的商品折扣信息</p>
                                            <p>如果自定义，则需要设置会员的比例和具体金额值，如果折扣和金额值都存在，则默认读取折扣</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-cur-wall" v-for="it in m.disCountJson" v-show="m.isDisCount">
                                    <label>{{it.name}}：</label>
                                    <div class="layui-input-block row">
                                        <input type="text" v-model="it.ratio" style="width:120px; display:inline-block;" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <span class="col-span">折 或者 会员价</span>
                                        <input type="text" v-model="it.money" style="width:120px; display:inline-block;" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
                                        <span class="col-span">元</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align:center;">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">返回列表</button>
            </div>
        </div>
    </form>
    <script src="/themes/tinymce/tinymce.min.js"></script>
    <script src="/themes/tinymce/langs/zh_CN.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    m: {
                        serverJson: [
                            { name: '正品保证', status: true },
                            { name: '7天无理由退货', status: true },
                            { name: '保修', status: true }
                        ]
                    },
                    isjfdh: true,
                    category: [],
                    brand: [],
                    store: [],
                    spect: [],
                    spectCode:[],
                    selectCbkSpect: [],
                    spectTable: []
                }
            },
            methods: {
                addSpect: function () {
                    this.initspectTable();
                },
                delSpect: function () {
                    this.spectTable = [];
                    this.selectCbkSpect = [];
                    this.selelctSpectValue = [];
                    this.m.isOpenSpect = false;
                    $("[name=spectSel]:checkbox").prop("checked", false);
                    vm.$nextTick(function () {
                        form.render('checkbox');
                    });
                },
                spectDel: function (index) {
                    this.spectTable.splice(index, 1);
                },
                initspectTable: function (defaults=false) {
                    this.spectTable.push({
                        number: oc.getNumber(6),
                        kcsum: 0,
                        saleprice: 0,
                        sourceprice: 0,
                        costprice: 0,
                        isdefault: defaults,
                        sku: '',
                        spectValue: []
                    });
                },
                cbkIsExist: function (m) { 
                    var that = this;
                    if (that.selectCbkSpect.length===0) { return false; }
                    for (var i = 0; i < that.selectCbkSpect.length; i++) {
                        if (that.selectCbkSpect[i].guid==m.guid) {
                            return true;
                        }
                    }
                },
                changeDefault: function (m) {
                    var that = this;
                    for (var i = 0; i < that.spectTable.length; i++) {
                        if (that.spectTable[i] == m) {
                            that.spectTable[i].isdefault = true;
                        } else {
                            that.spectTable[i].isdefault = false;
                        }
                    }
                }
            }
        });
        var oc, os, form,$;
        
        layui.config({
            base: '/themes/js/modules/'
        }).use(['element', 'layer', 'jquery', 'common', 'form', 'nestable', 'slider', 'laydate'], function () {
            var element = layui.element, slider = layui.slider, laydate = layui.laydate;
            os = layui.common;
            form = layui.form;
            $ = layui.jquery
            vm.m.guid = os.getUrlParam('guid');
            vm.m.columnGuid = os.getUrlParam('category');
            form.render();
            var sort = slider.render({
                elem: '#sort'
                , theme: '#1E9FFF'
                , input: true
                , change: function (value) {
                    vm.m.sort = value;
                }
            });
            laydate.render({
                elem: '#uptime'
                , type: 'datetime'
                , range: true
            });
            $('.panel-addpic').css({ 'min-height': $(window).height() - 95 });
            $('.layui-tab-item').css({ height: $(window).height() - 140 });
            os.cloudFile();
            oc = {
                initEdit() {
                    tinymce.init({
                        selector: '#Context',
                        height: 400,
                        width: '99%',
                        plugins: 'print preview code searchreplace autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help filemanager',
                        toolbar: 'formatselect styleselect | bold italic forecolor backcolor | link filemanager | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat'
                    });
                },
                setContent(v) {
                    for (var i = 0; i < v.length; i++) {
                        var item = v[i];
                        var imgIndex = v.lastIndexOf('/');
                        var str = item.name.substring(imgIndex + 1, item.name.length);
                        if (os.isExtImage(item.name)) {
                            tinyMCE.editors[0].execCommand('mceInsertContent', false, '<p><img src="' + item.name + '" alt="' + str + '"/></p>')
                        } else {
                            tinyMCE.editors[0].execCommand('mceInsertContent', false, '<p style="padding:12px 20px;background-color: #edf3f5;"><a href="' + item.name + '" target="_blank" title="' + str + '">' + str + '</a></p>')
                        }
                    }
                },
                setMany(v) {
                    for (var i = 0; i < v.length; i++) {
                        var item = v[i];
                        vm.m.imageList.push({ image: item.name });
                    }
                    vm.$nextTick(function() {
                        oc.loadImgSort();
                    });
                },
                deleteFile(v) {
                    for (var i = 0; i < vm.m.imageList.length; i++) {
                        var item = vm.m.imageList[i];
                        if (item.image == v) {
                            var j = { image: v };
                            vm.m.imageList.splice(j, 1);
                        }
                    }
                    vm.$nextTick(function() {
                        oc.loadImgSort();
                    });
                },
                loadImgSort() {
                    $('.dd').nestable({
                        group: 1
                    }).on('change', function (e) {
                        var list = e.length ? e : $(e.target);
                        //console.log(window.JSON.stringify(list.nestable('serialize')));
                    });
                },
                init() {
                    os.load();
                    os.ajax('api/shop/goods/getmodel', { parm: vm.m.guid }, function (res) {
                        if (res.statusCode === 200) {
                            //console.log(res.data);
                            vm.m = res.data.model;
                            sort.setValue(vm.m.sort);
                            vm.category = res.data.column;
                            vm.brand = res.data.brand;
                            vm.store = res.data.store;
                            vm.spect = res.data.spect;
                            vm.spectCode = res.data.spectCode;
                            vm.selectCbkSpect = res.data.model.spectColumnJson;
                            vm.spectTable = res.data.model.spectJson;
                            if (vm.m.beginTime) {
                                $('#uptime').val(vm.m.beginTime + ' - ' + vm.m.endTime);
                            }
                            vm.$nextTick(function () {
                                oc.initEdit();
                                $("#store").val(vm.m.storeGuid);
                                $("#brand").val(vm.m.brandGuid);
                                $("#category").val(vm.m.columnGuid);

                                $("#cbk_zpbz").prop("checked", vm.m.serverJson[0].status);
                                $("#cbk_wllth").prop("checked", vm.m.serverJson[1].status);
                                $("#cbk_bx").prop("checked", vm.m.serverJson[2].status);
                                $("#isTop").prop("checked", vm.m.isTop);
                                $("#isRed").prop("checked", vm.m.isRed);
                                $("#isDelivery").prop("checked", vm.m.isDelivery);
                                $("#isCoupon").prop("checked", vm.m.isCoupon);
                                $("#isDel").prop("checked", vm.m.isDel);
                                $("#isReturn").prop("checked", vm.m.isReturn);
                                $("#isExchange").prop("checked", vm.m.isExchange);
                                $("#isOpenSpect").prop("checked", vm.m.isOpenSpect);
                                $("#isFenXiao").prop("checked", vm.m.isFenXiao);
                                $("#isDisCount").prop("checked", vm.m.isDisCount);
                                $("#disCountType").prop("checked", vm.m.disCountType);

                                if (vm.m.isAudit) {
                                    $("input[name='isAudit'][value='up']").prop("checked", true);
                                } else {
                                    $("input[name='isAudit'][value='down']").prop("checked", true);
                                }
                                if (vm.m.disCountType) {
                                    $("input[name='disCountType'][value='true']").prop("checked", true);
                                } else {
                                    $("input[name='disCountType'][value='false']").prop("checked", true);
                                }

                                form.render();
                                os.loadClose();
                            });
                        } else {
                            os.error(res.message);
                            os.loadClose();
                        }
                    });
                },
                getNumber(n) {
                    var chars = [
                        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
                        'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
                    ];                    var res = "";
                    for (var i = 0; i < n; i++) {
                        var id = Math.ceil(Math.random() * 35);
                        res += chars[id];
                    }
                    return res;                }
            };
            setTimeout(function () { oc.init(); }, 200);
            form.on('switch(exchange)', function (data) {
                vm.isjfdh = data.elem.checked;
            });
            form.on('switch(fenxiao)', function (data) {
                vm.m.isFenXiao = data.elem.checked;
            });
            form.on('switch(discount)', function (data) {
                vm.m.isDisCount = data.elem.checked;
            }); 
            form.on('switch(switchSpect)', function (data) {
                vm.m.isOpenSpect = data.elem.checked;
                if (data.elem.checked) {
                    vm.initspectTable(true);
                } else {
                    vm.spectTable = [];
                }
            }); 
            form.on('checkbox(spectCbk)', function (data) {                
                var iscz = false;
                for (var i = 0; i < vm.selectCbkSpect.length; i++) {
                    if (vm.selectCbkSpect[i].name == data.value) {
                        iscz = true;
                        //删除
                        var sy = vm.selectCbkSpect.indexOf(vm.selectCbkSpect[i]);
                        vm.selectCbkSpect.splice(sy, 1);
                    }
                }
                
                if (data.elem.checked) {
                    if (!iscz) {
                        vm.selectCbkSpect.push({ guid: $(data.elem).data('guid'), name: data.value, enname: $(data.elem).data('enname'),value:'' });
                    }
                    vm.spectTable = [];
                    vm.initspectTable(true);
                }
                
            }); 
            //监听提交
            form.on('submit(submit)', function (data) {
                if (vm.m.imageList.length == 0) {
                    os.error('请选择商品图片~');
                    return false;
                }
                //$('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var urls = "api/shop/goods/add";
                if (vm.m.guid) {
                    urls = "api/shop/goods/update";
                }
                vm.m.context = tinyMCE.editors[0].getContent();
                vm.m.storeGuid = data.field.store;
                vm.m.brandGuid = data.field.brand;
                vm.m.columnGuid = parseInt(data.field.category);
                //根据分类，查询父级
                $.each(vm.category, function (i, item) {
                    if (vm.m.columnGuid === item.id) {
                        vm.m.columnParentGuid = item.classList;
                    }
                });

                vm.m.isTop = data.field.isTop === 'on' ? true : false;
                vm.m.isRed = data.field.isRed === 'on' ? true : false;
                vm.m.isDelivery = data.field.isDelivery === 'on' ? true : false;
                vm.m.isCoupon = data.field.isCoupon === 'on' ? true : false;
                vm.m.isDel = data.field.isDel === 'on' ? true : false;
                vm.m.isReturn = data.field.isReturn === 'on' ? true : false;
                vm.m.isExchange = data.field.isExchange === 'on' ? true : false;
                vm.m.isOpenSpect = data.field.isOpenSpect === 'on' ? true : false;
                vm.m.isFenXiao = data.field.isFenXiao === 'on' ? true : false;
                vm.m.isDisCount = data.field.isDisCount === 'on' ? true : false;
                vm.m.isAudit = data.field.isAudit === 'up' ? true : false;
                vm.m.disCountType = data.field.disCountType === 'true' ? true : false;
                vm.m.serverJson[0].status = data.field.cbk_zpbz === 'on' ? true : false;
                vm.m.serverJson[1].status = data.field.cbk_wllth === 'on' ? true : false;
                vm.m.serverJson[2].status = data.field.cbk_bx === 'on' ? true : false;
                vm.m.cover = vm.m.imageList[0].image;
                //判断上架日期
                if (data.field.uptime) {
                    vm.m.beginTime = data.field.uptime.split(" - ")[0];
                    vm.m.endTime = data.field.uptime.split(" - ")[1];
                }
                //构建规格
                vm.selelctSpectValue = [];
                for (var i = 0; i < vm.spectTable.length; i++) {
                    var tempValue = [];
                    for (var j = 0; j < vm.selectCbkSpect.length; j++) {
                        tempValue.push(
                            {
                                guid: vm.selectCbkSpect[j].guid,
                                name: vm.selectCbkSpect[j].name,
                                enname: vm.selectCbkSpect[j].enname,
                                value: document.getElementById('day' + j + '_' + i).value
                            }
                        );
                    }
                    vm.spectTable[i].spectValue = tempValue;
                }
                vm.m.spectJson = vm.spectTable;
                vm.m.spectColumnJson = vm.selectCbkSpect;
                
                //console.log(data.field);
                //console.log(vm.m); return false;
                os.ajax(urls, vm.m, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode === 200) {
                        var $$ = parent.layui.jquery;
                        $$("#isSave").val('1');
                        os.success('保存成功~');
                        setTimeout(function () {
                            parent.active.closeCloumnModify();
                        }, 500);
                    }
                    else {
                        os.error(res.message);
                    }
                });
                return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.active.closeCloumnModify();
            });
        });
    </script>
</div>